<template>
  <div id="homecomp1">
    <h1>插槽</h1>
    <button @click="dynamicSlotName = 'header'">放在头部</button>
    <button @click="dynamicSlotName = 'footer'">放在尾部</button>
    <!--    <navigation-link url="/profile">-->
    <!--      <template-->
    <!--        v-slot="{-->
    <!--          user: {-->
    <!--            lastName,-->
    <!--            person: { a },-->
    <!--          },-->
    <!--        }">-->
    <!--        <p>{{ lastName }}</p>-->
    <!--        <p>{{ a }}</p>-->
    <!--        <p>我是中间</p>-->
    <!--        <p>我是中间1</p>-->
    <!--        <p>我是中间2</p>-->
    <!--      </template>-->
    <!--      &lt;!&ndash;      <template v-slot:footer>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <p>我是脚部</p>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </template>&ndash;&gt;-->
    <!--      <template v-slot:[dynamicSlotName]>-->
    <!--        <h1>我是头部</h1>-->
    <!--      </template>-->
    <!--    </navigation-link>-->

    <todo-list v-bind:filteredTodos="todos">
      <template v-slot:todo="{ todo }">
        <span v-if="todo.isComplete">✓</span>
        {{ todo.text }}
      </template>
    </todo-list>
  </div>
</template>

<script>
// import NavigationLink from "@/components/test/navigation-link.vue";
import TodoList from "@/components/test/todo-list.vue";
export default {
  name: "HomeComp1",
  components: { TodoList },
  data: function () {
    return {
      dynamicSlotName: "header",
      user: {
        name: "张三",
      },
      todos: [
        {
          id: 1,
          text: "aaa",
          isComplete: true,
        },
        {
          id: 2,
          text: "bbb",
          isComplete: false,
        },
        {
          id: 3,
          text: "ccc",
          isComplete: true,
        },
      ],
    };
  },
};
</script>

<style scoped>
#homecomp1 {
  background: #6aacef;
  height: 400px;
}
</style>
